<style scoped>
.logo{
  float: left;
  height: 20px;
  width: 150px;
  color: white;
  font-size: 20px;
}
</style>

<template>
   <a-layout-header id="components-layout-demo-top-side-2" class="header">
      <div class="logo">
        <router-link to="/welcome" style="color: white">
          12306控制台
        </router-link>
      </div>
      <div style="float: right; color: white;">
          欢迎使用管理控制台
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="/welcome">
          <router-link to="/welcome">
            <coffee-outlined/> &nbsp; 欢迎 
          </router-link>
        </a-menu-item>
        <a-menu-item key="/about">
          <!-- 点击路由跳转的标签 "rooter-link" -->
          <router-link to="/about">
            <user-outlined/> &nbsp; 关于
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
</template>

<script>
import { defineComponent,ref,watch } from 'vue';
import router from '@/router';
export default defineComponent({
  name: "main-header-view",
  setup() {
    const selectedKeys = ref([]);
    // 获取当前的路径
    watch( () => router.currentRoute.value.path , 
      // 当路由发生变化的时候执行的回调函数
      (newPath) => {
        console.log('watch',newPath)
        // 先清空selectedKeys数组中的值
        selectedKeys.value = []
        // 将当前变化的值添加到selectedKeys数组中
        selectedKeys.value.push(newPath)
      },{immediate:true}
    )

    return {
      selectedKeys,
    };
  },
});
</script>